<template>
	<view class="page">
		<view class="main">
			<view class="banner">
				<banner :banners="banners"></banner>
			</view>
			<view class="content-wraper">
				<view v-if="NewlyReleased && NewlyReleased.length > 0" class="grounp-wraper">
					<text class="pub-title">Newly Released</text>
					<u-scroll-list class="scroll-view" :indicator="false">
						<view class="scroll-view-item" v-for="(item, index) in NewlyReleased" :key="index"
							@tap="goPage(item)">
							<image class="image_warp" :src="item.Image" mode='aspectFill' />
							<view class="text-name"> {{ item.Title }} </view>
						</view>
					</u-scroll-list>
				</view>

				<view v-if="ContinueWatching && ContinueWatching.length > 0" class="grounp-wraper continueWatching">
					<text class="pub-title">Continue Watching</text>
					<u-scroll-list class="scroll-view" :indicator="false">
						<view class="scroll-view-item" v-for="(item, index) in ContinueWatching" :key="index"
							@tap="goPage(item)">
							<cover-image class="play-icon" @click="play" src="/static/icon_play.png"></cover-image>
							<image class="image_warp" :src="item.Image" />
						</view>
					</u-scroll-list>
				</view>

				<view v-if="Customize && Customize.length > 0" class="grounp-wraper-h">
					<text class="pub-title">{{ CustomizeName }}</text>
					<view class="view-wraper">
						<view class="scroll-view-item" v-for="item in Customize" :key="item.Id" @tap="goPage(item)">
							<image class="image_warp" :src="item.Image" />
							<view class="text-wraper">
								<text class="text-title">{{ item.Title }}</text>
								<view class="text-icon-wrap">
									<text class="text-icon" v-for="(tag, index) in item.Tags"
										:key="index">{{ tag }}</text>
								</view>
								<text class="text-desc">
									{{ item.Desc}}
								</text>
							</view>
						</view>
					</view>
				</view>

				<view v-if="YouMightLike && YouMightLike.length > 0" class="grounp-wraper-w">
					<text class="pub-title">You Might Like</text>
					<view class="view-wraper">
						<u-row gutter="30rpx">
							<u-col span="6" v-for="(item, index) in YouMightLike">
								<view class="item-wraper" @tap="goPage(item)">
									<image class="image_warp" mode="aspectFill" :src="item.Image" />
									<text class="text-title">{{ item.Title }}</text>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>

				<view class="copyRight">
					<view class="companyName"> ASEAN CULTURE GROUP LIMITED</view>
					<view class="address">ADDRESS: UNIT 1002，10/F PERFECT COMM BLDG 20 AUSTIN AVENUE TST
						KL</view>
					<view class="text">TEL:00852 53160537 © 2023 FlowShort</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import banner from "./components/banner.vue";
	export default {
		components: {
			banner,
		},
		data() {
			return {
				banners: [
					// {
					//   Title: "测试1",
					//   Image: "https://static.flowshort.tv/banner4.jpg",
					//   VideoId: 1,
					// },
				],
				NewlyReleased: [
					// {
					//   Id: 1,
					//   Title: "An unspeakable secret",
					//   Desc: "The gang kicks it off by heading to Las Vegas. After partying through Sin City, they head back to the East Coast…",
					//   Image: "https://static.flowshort.tv/封面2.jpg",
					//   EpisodesTotal: 50,
					//   Tags: [],
					// },
				],
				ContinueWatching: [
					// {
					//   Id: 1,
					//   Title: "An unspeakable secret",
					//   Desc: "The gang kicks it off by heading to Las Vegas. After partying through Sin City, they head back to the East Coast…",
					//   Image: "https://static.flowshort.tv/封面11.jpg",
					//   EpisodesTotal: 50,
					//   Tags: [],
					// },
				],
				Customize: [
					// {
					//   Id: 1,
					//   Title: "An unspeakable secret",
					//   Desc: "The gang kicks it off by heading to Las Vegas. After partying through Sin City, they head back to the East Coast…",
					//   Image: "https://static.flowshort.tv/封面11.jpg",
					//   EpisodesTotal: 50,
					//   Tags: ["Urban"],
					// },
				],
				YouMightLike: [
					// {
					//   Id: 1,
					//   Title: "The Alpha's Rejected Mate",
					//   Desc: "The gang kicks it off by heading to Las Vegas. After partying through Sin City, they head back to the East Coast…",
					//   Image: "https://static.flowshort.tv/封面11.jpg",
					//   EpisodesTotal: 50,
					//   Tags: ["Urban"],
					// },
				],
				CustomizeName: "Custom",
			};
		},
		onLoad() {
			this.initData();
		},

		methods: {
			initData() {
				uni.request({
					url: "https://api.flowshort.tv/home/index",
					header: {
						"content-type": "application/json",
						"Access-Control-Allow-Origin": "*",
					},
					method: "POST",
					success: (res) => {
						if (res.statusCode == 200) {
							this.banners = res.data.Data.Banner;
							this.NewlyReleased = res.data.Data.NewlyReleased;
							this.ContinueWatching = res.data.Data.ContinueWatching;
							this.Customize = res.data.Data.Customize;
							this.CustomizeName = res.data.Data.CustomizeName;
						}
					},
				});

				uni.request({
					url: "https://api.flowshort.tv/home/suggestedForYou",
					header: {
						"content-type": "application/json",
						"Access-Control-Allow-Origin": "*",
					},
					data: {
						Offset: 0,
						Limit: 10,
					},
					method: "POST",
					success: (res) => {
						if (res.statusCode == 200) {
							this.YouMightLike = res.data.Data.List;
						}
					},
				});
			},
			play(event) {
				this.videoCtx.play();
				uni.showToast({
					title: "开始播放",
					icon: "none",
				});
			},
			pause(event) {
				this.videoCtx.pause();
				uni.showToast({
					title: "暂停播放",
					icon: "none",
				});
			},
			goPage(item) {
				uni.navigateTo({
					url: `/pages/videoList/videoList?id=${item.Id}&title=${item.Title}`,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.page {
		position: relative;
		width: 100%;
		min-height: 100vh;
		height: auto;
		overflow: hidden;

		.pub-title {
			display: block;
			color: #fff;
			font-size: 36rpx;
			font-family: PingFangSC-Semibold;
			font-weight: 600;
			white-space: nowrap;
			line-height: 50rpx;
			width: 100%;
			clear: both;
		}

		.main {
			background-color: rgba(0, 0, 0, 1);

			.banner {
				width: 100%;
				margin-bottom: 20rpx;
			}

			.content-wraper {
				position: relative;
				width: 100%;

				.grounp-wraper {
					position: relative;
					white-space: nowrap;
					padding-left: 30rpx;

					.scroll-view {
						margin-top: 20rpx;
						width: 100%;

						.scroll-view-item {
							display: inline-block;
							/* 让子元素在同一行上 */
							width: 240rpx;
							/* 适当设置宽度 */
							margin-right: 10px;
							/* 可以设置间距 */
							overflow: hidden;

							.image_warp {
								width: 100%;
								height: 316rpx;
								border-radius: 16rpx;
							}

							.text-name {
								width: 100%;
								overflow: hidden;
								display: block;
								font-size: 32rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								color: #ffffff;
								padding: 10rpx 10rpx 10rpx 0;
								white-space: normal !important;
							}
						}
					}
				}

				.continueWatching {
					.scroll-view-item {
						position: relative;

						.play-icon {
							position: absolute;
							width: 64rpx;
							height: 64rpx;
							z-index: 1;
							left: 50%;
							top: 50%;
							margin-top: -32rpx;
							margin-left: -32rpx;

							img {
								width: 64rpx;
								height: 64rpx;
							}
						}
					}
				}

				.grounp-wraper-h {
					padding: 10rpx 30rpx 10rpx;
					overflow: hidden;

					.view-wraper {
						margin-top: 20rpx;
						display: flex;
						flex-direction: column;
						width: 100%;
						justify-content: center;

						.scroll-view-item {
							display: flex;
							margin-bottom: 20rpx;
							width: 100%;

							.image_warp {
								width: 240rpx;
								height: 316rpx;
								border-radius: 16rpx;
							}

							.text-wraper {
								margin-left: 20rpx;
								font-family: PingFangSC, PingFang SC;
								width: calc(100% - 240rpx);
								padding-right: 20rpx;
								display: flex;
								flex-direction: column;

								.text-title {
									width: 100%;
									font-size: 32rpx;
									line-height: 32rpx;
									font-weight: 500;
									color: #ffffff;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									margin-bottom: 16rpx;
								}

								.text-icon-wrap {
									display: block;
									display: flex;
									flex-direction: row;
									align-items: center;
									flex-wrap: wrap;

									.text-icon {
										display: inline-block;
										font-size: 24rpx;
										line-height: 24rpx;
										font-weight: 400;
										color: #7d7d7d;
										padding: 4rpx 6rpx;
										word-break: break-all;
										border-radius: 8rpx;
										border: 1rpx solid #737373;
									}
								}

								.text-desc {
									display: block;
									font-size: 26rpx;
									color: #7d7d7d;
									padding: 10rpx 10rpx 0;
									word-wrap: break-word;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 6;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}
						}
					}
				}

				.grounp-wraper-w {
					padding: 10rpx 30rpx;
					overflow: hidden;
					width: 100%;

					.view-wraper {
						margin-top: 20rpx;
						width: 100%;

						.u-row {
							flex-wrap: wrap;
							margin-left: -15rpx;
							margin-right: -15rpx;

							.item-wraper {
								.image_warp {
									width: 100%;
									height: 468rpx;
									border-radius: 16rpx;

									img {
										max-height: 468rpx;
									}
								}

								.text-title {
									width: 100%;
									font-size: 32rpx;
									line-height: 36rpx;
									font-weight: 500;
									color: #ffffff;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									word-break: break-all;
									height: 72rpx;
									margin-top: 10rpx;
									margin-bottom: 16rpx;
								}
							}
						}
					}
				}
			}
		}

		.copyRight {
			width: 100%;
			padding: 20rpx 0;
			text-align: center;
			color: #7d7d7d;
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			line-height: 24rpx;
			background-color: #000;
			margin-top: 20rpx;
			box-sizing: border-box;
			line-height: 1.5;
			display: flex;
			flex-direction: column;
			justify-content: center;
			transform: scale(0.9);
		}
	}

	@media screen and (min-width: 750px) {
		.page {
			width: 750px;
			margin: 0 auto;
		}
	}
</style>